import { formUI } from '@/comon/tools';
import { ComponentPropsType } from '@/components/editor';
import {
  formItem,
  label,
  required,
  rules,
  useForm,
  valueName,
} from '@/hooks/useForm';
import { useEditorStore } from '@/store/editor';
import { Checkbox, Input } from 'antd';
import { FC, useEffect } from 'react';

class Config {
  @label('段落内容')
  @formItem(<Input.TextArea />)
  @rules([required('请输入段落内容')])
  text?: string;

  @formItem(<Checkbox>居中显示</Checkbox>)
  @valueName('checked')
  isCenter?: boolean = true;
}

const Form: FC = () => {
  const { selectedComponentInfo, selectedId, updateSelected } =
    useEditorStore();

  const form = useForm({
    config: Config,
    onChange,
  });

  useEffect(() => {
    if (selectedComponentInfo?.props) {
      form.setFormData(selectedComponentInfo.props);
    }
  }, [selectedId]);

  function onChange(props: ComponentPropsType) {
    updateSelected({ props });
  }

  return formUI(form, selectedComponentInfo?.isLocked);
};

export default Form;
